<template>
  <div>
    <div class="box">
      <select v-model="selectedTheme" @change="changeTheme">
        <option value="">默认</option>
        <option v-for="theme in themes" :key="theme" :value="theme">{{ theme }}</option>
      </select>
      <div class="fullscreen-content">
        <index></index>
      </div>
    </div>
  </div>
</template>
<script>
import index from '@/pages/skrivet/app/index.vue'
export default {
  name: 'TransitPeelingSetup',
  components: {
    index
  },
  data() {
    return {
      selectedTheme: '', // 当前选中的主题
      themes: ['light', 'dark', 'blue'] // 主题选项
    }
  },

  mounted() { },

  methods: {
    changeTheme() {
      const fullscreenElement = document.documentElement
      if (this.selectedTheme !== '') {
        fullscreenElement.className = this.selectedTheme
      } else {
        fullscreenElement.className = '' // 恢复默认主题
      }
    }
  }
}
</script>
<style>
.box {
  width: 500px;
  height: 500px;
}

.light {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.dark {
  width: 100px;
  height: 100px;
  background-color: rgb(82, 12, 58);
}

.blue {
  width: 100px;
  height: 100px;
  background-color: rgb(45, 7, 180);
}</style>